<template>
  <view class="page_box">
    <head-box></head-box>
    <view class="vote_box tab-botton">
      <view class="vote_img">
        <image :src="info.voteoptionPic" mode="aspectFill"></image>
      </view>
      <view class="vote_title">
        <view class="vote_title_l">{{ info.voteoptionName }}</view>
        <!-- <view class="vote_title_r" @tap="share()">邀请投票 <image src="../../static/img/zf.png"></image></view> -->
      </view>
      <view class="vote_title">
        <view class="vote_title_l">当前投票数 {{ info.voteoptionNum }} 票</view>
        <view class="vote_title_r"
          >第 <text class="mc">{{ info.mc }}</text> 名</view
        >
      </view>
      <view class="_page-main-content">
        <video
          v-if="info.voteoptionVideourl != ''"
          class="_video"
          :src="info.voteoptionVideourl"
          controls
          show-mute-btn
          type="video/mp4"
          controls="controls"
          autoplay="true"
        ></video>
        <rich-text class="mian_body" :nodes="info.voteoptionDesc"></rich-text>
      </view>
      <!-- <view class="b_btn">
				<button class="vote_btn" type="primary" @tap="addVote">投票</button>
			</view> -->
    </view>
    <tabs-box></tabs-box>
    <!-- 分享 -->
    <pointshare :show="isShow" @close="onClose"></pointshare>
  </view>
</template>

<script>
  import { canVote, voteInfo, addVote } from '@/common/request.js'
  import pointshare from '@/components/point-share/index'
  // #ifdef H5
  var jweixin = require('js_sdk/jweixin-module/index.js')
  var clipBoard = require('js_sdk/ican-clipBoard/ican-clipBoard.js')
  var graceRichText = require('../../static/richText.js')
  // #endif
  export default {
    components: {
      pointshare,
    },
    data() {
      return {
        info: [],
        isWx: false,
        isShow: false,
      }
    },
    onLoad(options) {
      //let id=
      //that.info = uni.getStorageSync("voteInfo");
      const param = { id: options.id }
      voteInfo(param).then((res) => {
        if (res.success) {
          if (res.result.records.length == 1) {
            this.info = res.result.records[0]
            //console.log(this.info);
            this.info['voteoptionPic'] = this.$api.getImgUrl(this.info.voteoptionPic)
            this.info['voteoptionVideourl'] = this.$api.getImgUrl(this.info.voteoptionVideourl)
            this.info['mc'] = parseInt(options.mc) + 1
          }
        }
        //res.result.records.forEach(ele => {
        //	ele["voteoptionPic"] = this.getimgurl(ele.voteoptionPic);
        //	ele["voteoptionVideourl"] = this.getimgurl(ele.voteoptionVideourl);
        //	//var n = {id:ele.id,voteoptionPic:,voteoptionNum:ele.voteoptionNum,voteoptionName:ele.voteoptionName}
        //	that.list.push(ele);
        //})
      })

      //this.info.voteoptionDesc = graceRichText.format(this.info.voteoptionDesc);
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    methods: {},
  }
</script>

<style lang="scss">
  .b_btn {
    padding: 0 30rpx;
    position: absolute;
    width: 100%;
    bottom: 160rpx;
    .vote_btn {
      margin-top: 15rpx;
      background-color: #f58732;
    }
  }
  ._video {
    width: 100%;
    border-radius: 10rpx;
  }
  .page_box {
    min-height: 100vh;
    background-color: #f3f3f3;
    .vote_box {
      .vote_img {
        width: 100%;
        height: 500rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .vote_title {
        margin-top: 20rpx;
        background-color: #ffffff;
        padding: 30rpx;
        display: flex;
        flex-direction: row;
        .vote_title_l {
          width: 70%;
        }
        .vote_title_r {
          width: 30%;
          height: 30rpx;
          text-align: right;
          image {
            width: 30rpx;
            height: 30rpx;
            margin-left: 10rpx;
            margin-bottom: -6rpx;
          }
          .mc {
            margin: 0 10rpx;
            font-weight: bold;
            font-size: 30rpx;
            color: #d8271c;
          }
        }
      }
    }

    ._page-main-content {
      margin-top: 30rpx;
      font-size: 32rpx;
      line-height: 60rpx;
      padding: 30rpx;
      background-color: #ffffff;
      min-height: 600rpx;
      /deep/ .mian_body {
      }

      /deep/ .box_p {
        margin-top: 20rpx;
        font-family: 微软雅黑 !important;
        font-size: 32rpx !important;
        line-height: 60rpx !important;
      }
      /deep/ .box_span {
        margin-top: 20rpx;
        font-family: 微软雅黑 !important;
        font-size: 32rpx !important;
        line-height: 60rpx !important;
      }
      /deep/ view {
        font-size: 32rpx;
        line-height: 60rpx;
      }

      /deep/ .box_img {
        border-radius: 10rpx;
        width: 100%;
        margin: 10rpx 0;
      }
      ._rich-text {
        /deep/ img {
          width: 100%;
        }
      }
    }
  }
</style>
